<template>
  <el-tabs type="border-card">
    <el-tab-pane label="模块预览">
      <div class="container">
        <img src="@/assets/images/chicken.png" ismap="ismap" width="798" height="709" alt="chicken-1" usemap="#planetmap">
      </div>
      <map name="planetmap" id="planetmap">
        <!--采购入库-->
        <area shape="rect" coords="284,28,348,80" alt="Sun" href="/erp/inventory/warehousing">
        <!--小鸡孵化-->
        <area shape="rect" coords="209,126,269,175" alt="Sun" href="/farm/chicken/production/hatch">
        <!--鸡苗采购-->
        <area shape="rect" coords="370,123,424,176" alt="Sun" href="/farm/chicken/production/chickenChickIn">
        <!--饲料投喂-->
        <area shape="rect" coords="25,329,130,400" alt="Sun" href="/farm/chicken/production/chickenFeedOut">
        <!--治疗免疫-->
        <area shape="rect" coords="467,337,543,392" alt="Sun" href="/farm/chicken/production/grow">
        <!--销售管理-->
        <area shape="rect" coords="281,481,364,533" alt="Sun" href="/erp/sale/farmSale">
        <!--费用管理-->
        <area shape="rect" coords="278,601,368,657" alt="Sun" href="/erp/cost/erpCostOut">
        <!--饲料管理-->
        <area shape="rect" coords="34,183,117,243" alt="Sun" href="/erp/inventory/warehousing">
        <!--药品管理-->
        <area shape="rect" coords="547,182,646,242" alt="Sun" href="/erp/folder/products">
      </map>
    </el-tab-pane>
    <el-tab-pane label="商城预览">
      <el-form :model="query">
        <el-form-item label="销售日期">
          <div style="display: flex">
            <el-date-picker
              v-model="query.begin"
              style="width: 115px"
              value-format="YYYY-MM-DD"
              type="date"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0)]"
              placeholder="开始日期"
            />
            <div style="margin: 0 5px">-</div>
            <el-date-picker
              v-model="query.end"
              style="width: 115px"
              :default-time="[new Date(2000, 1, 1, 23, 59, 59)]"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="结束日期"
            />
          </div>
        </el-form-item>
      </el-form>
      <div style="margin: 300px auto;font-size: 30px;text-align: center" @click="getTurnover">建设中……</div>
    </el-tab-pane>
  </el-tabs>

</template>

<script setup name="Index" lang="ts">

import { getTurnoverApi } from '@/api/mall/mallTotal';
const query =ref({
  begin:'',
  end: ''
})

const getTurnover=async ()=>{
  const res = await getTurnoverApi(query.value);
  console.log(res);

}


</script>

<style scoped lang="scss">
.container{
  width: 100%;
  height: 800px;
  position: relative;
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
